<template>
    <div class="relay">
        <div v-for="item in relayData.doctorDate" class="relay_item" :key="item.id">
            <div class="item">{{ item.date }}</div>
            <div :class="item.morning == 1 ? 'active' : ''" @click="item.morning = Number(!item.morning)">上午</div>
            <div :class="item.afternoon == 1 ? 'active' : ''" @click="item.afternoon = Number(!item.afternoon)">下午</div>
            <div :class="item.night == 1 ? 'active' : ''" @click="item.night = Number(!item.night)">夜班</div>
        </div>
    </div>
    <el-button type="primary" @click="editDayline">确认修改排班</el-button>
</template>

<script setup lang="ts">
import { edit_dn_daylineReq, get_dn_daylineReq } from '@/api/doctor.api';
import { ref, reactive } from 'vue';



const id = localStorage.getItem('info')
const relayData = reactive<any>({
    doctorDate: {}
})

get_dn_daylineReq(Number(id)).then(res => {
    relayData.doctorDate = JSON.parse(res.data.data[0].date)
})

const editDayline = () => {
    let daylineData = {
        id: localStorage.getItem('info'),
        newdate: JSON.stringify(relayData.doctorDate)
    }
    edit_dn_daylineReq(daylineData).then(res => {
        console.log(res);

    })

}


</script>

<style scoped lang="scss">
.relay {
    display: flex;
    flex-wrap: wrap;

    .relay_item {
        width: 150px;
        text-align: center;
        cursor: pointer;

        div {
            height: 25px;
            line-height: 25px;
        }
    }
}

.item:nth-child(2n+1) {
    background: #36b2ec;
}

.el-button {
    margin-top: 20px;
}

.active {
    background: #00b578;
}
</style>